<template>
	<view>
		<view class="list">
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					所属品牌
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openPicker('brandId')">
					<input class="input-r" type="text" placeholder="请选择所属品牌" placeholder-class="placeholder-class"
						v-model="brandId" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">加盟费</view>
				<view class="acea-row row-middle row-right item-r">
					<view class="acea-row row-middle row-right small-ipt">
						<input type="text" placeholder="示例:2-5万" v-model="dataform.franchiseFee">
						<text>元</text>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					加盟城市
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="goServiceArea">
					<input class="input-r" type="text" placeholder="请选择三个加盟城市" placeholder-class="placeholder-class"
						v-model="regionName" />
				</view>
			</view>
			<!-- 加盟方案 -->
			<view class="module">
				<view class="module-title">
					加盟方案
				</view>
				<view class="textacea-box">
					<textarea placeholder="请输入加盟方案" v-model="dataform.content" :maxlength="maxLength"></textarea>
					<view class="num-text">
						{{dataform.content.length}}/{{maxLength}}
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					标题
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入标题" placeholder-class="placeholder-class"
						v-model="dataform.title" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					地址
				</view>
				<view class="acea-row row-middle row-right item-r address">
					<input type="text" placeholder="请输入/选择地址" v-model="dataform.address">
					<image src="../static/images/location.png" mode="" @click="mapChooseLocation"></image>
				</view>
			</view>
			<!-- 联系人 -->
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					联系人
				</view>
				<view class="add-icon" @click="toPage('/pages/releases/addShopContact/addShopContact')">
					<image src="../static/images/add_icon.png" mode=""></image>
				</view>
			</view>
			<view class="item">
				<view class="contact-list">
					<view class="acea-row row-middle row-between contact-p" v-for="(item,index) in contactList"
						:key="item.id">
						<view class="acea-row row-middle row-between contact-r">
							<view class="add-icon" @click="delContact()">
								<image src="../static/images/sub_icon.png" mode=""></image>
							</view>
							<view class="name">{{ item.username }}</view>
							<view class="gray-text">
								{{ item.type == 1 ? '老板' : ( item.type == 2 ? '房东' : '雇员') }}
							</view>
							<view class="gray-text">{{ item.phone }}</view>
						</view>
						<view class="acea-row row-middle check-box">
							<image src="../static/images/checkbox_on.png" mode="" v-if="item.status == 1"
								@click="item.status = 0"></image>
							<image src="../static/images/checkbox_no.png" mode="" v-if="item.status == 0"
								@click="item.status = 1"></image>
							<text>公开</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 上传照片/视频 -->
			<view class="module">
				<view class="acea-row row-middle row-between">
					<view class="module-title label-m">
						上传照片/视频
					</view>
					<view class="example-text">
						图片示例
					</view>
				</view>
				<view class="example-text-l">
					请至少添加一张照片，图片越多审核越快
				</view>
				<view class="acea-row pictrue-list">
					<view class="acea-row row-column row-center-wrapper pictrue" v-for="item in PhotoList"
						:key="item.url">
						<image :src="item.url" mode="" v-if="item.type=='image'"></image>
						<video :src="item.url" mode="" v-else></video>
					</view>
					<view class="acea-row row-column row-center-wrapper pictrue" @click="uploadImg"
						v-if="PhotoList.length<3">
						<view class="upload-icon">
							<image src="../static/images/upload_icon.png" mode=""></image>
						</view>
						<view>添加照片/视频</view>
					</view>
				</view>
				<!-- <view class="acea-row row-center row-center add-more-picture">
					<view>添加更多照片</view>
					<view class="jiantou-b"></view>
				</view> -->
			</view>
		</view>
		<view class="submit-btn" @click="handleComfrim">
			完成
		</view>
		<u-picker :show="pickerShow" :columns="columns" @cancel="pickerShow=false" @confirm="confirm" :keyName="keyName"
			:defaultIndex="defaultIndex"></u-picker>
		<serviceArea :filtrateArr="filtrateArr" ref="serviceArea" dataType="city" @area="handleArea" />
		<view class="uni-p-b-98">

		</view>
	</view>
</template>

<script>
	import {
		getAgentAddApi,
		getBrandListApi
	} from '@/api/brand/index.js';
	import {
		toPage,
		getLocation
	} from '@/filters/commFilter.js'
	import serviceArea from '../components/area.vue';
	export default {
		components: {
			serviceArea
		},
		data() {
			return {
				maxLength: 200,
				contactList: [],
				PhotoList: [],
				columns: [],
				pickerType: '',
				pickerShow: false,
				keyName: '',
				defaultIndex: [0],
				brandId: '', //所属品牌名称
				dataform: {
					content: ''
				},
				regionName: '', //加盟城市名称
				filtrateArr: [{
					type: '城市'
				}],
				brandList: [], //品牌列表
			};
		},
		onLoad(option) {
			this.dataform.brandId = option.brandId || null;
			this.brandId = option.brandName || null;
		},
		mounted() {
			this.getBrandList();
			let that = this;
			uni.$on('contact', function(data) {
				if (that.contactList.findIndex(item => item.phone == data.phone) == -1) {
					that.contactList.push({
						...data,
						status: 0
					});
				}
			})
			uni.$on('initContact', function(data) {
				if (that.contactList.length < 1) {
					that.contactList.push(data)
				}
			})
			getApp().globalData.initContact()
		},
		methods: {
			toPage,
			//获取品牌列表
			async getBrandList() {
				try {
					let res = await getBrandListApi({
						limit: 99999
					});
					this.brandList = res.data.list
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//去选择加盟城市
			goServiceArea() {
				this.$refs.serviceArea.filtrateShow = true;
			},
			//意向城市
			handleArea(areaInfo) {
				this.dataform.franchiseRegion = areaInfo.districtIds;
				this.regionName = areaInfo.regionName;
				this.fillTile();
			},
			//选择地址
			async mapChooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.$set(this.dataform, 'address', res.address)
						this.$set(this.dataform, 'latitude', res.latitude)
						this.$set(this.dataform, 'longitude', res.longitude)
					},
				})
			},
			//自动填充标题
			fillTile() {
				let {
					franchiseRegion,
					brandId,
					title
				} = this.dataform;
				this.dataform.title = franchiseRegion && brandId ? this.regionName + this.brandId + '代理加盟' : title
			},
			//打开选择器
			openPicker(params) {
				this.pickerType = params
				switch (params) {
					case 'brandId':
						this.columns = [
							this.brandList
						];
						this.keyName = 'realname';
						this.defaultIndex = [0]
						break;
					default:
						this.columns = []
				}
				this.pickerShow = true;
			},
			//点击完成
			confirm(e) {
				this.dataform[this.pickerType] = e.value[0].id
				this[this.pickerType] = e.value[0].realname;
				this.fillTile();
				this.pickerShow = false;
			},
			//删除联系人
			delContact(index) {
				this.contactList.splice(index, 1)
			},
			//上传照片
			uploadImg() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					count: 5,
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					that.PhotoList.push({
						url: res.data.url,
						type: 'image'
					})
				});
			},
			//提交表单
			handleComfrim() {
				let that = this
				this.dataform.contacts = this.contactList.map(item => {
					return {
						contactId: item.id,
						open: item.status,
						identity: item.type
					}
				});
				//处理图片数据
				let images = this.PhotoList.map(item => {
					return item.url.split('9000/')[1]
				})
				this.dataform.image = images.join(',');
				if (!this.dataform.brandId) return that.$util.Tips({
					title: '请选择所属品牌'
				});
				if (!this.dataform.franchiseFee) return that.$util.Tips({
					title: '请输入加盟费'
				});
				if (!this.dataform.franchiseRegion || this.dataform?.franchiseRegion?.split(',')?.length < 3) return that
					.$util.Tips({
						title: '请选择三个加盟城市'
					});
				if (!this.dataform.title) return that.$util.Tips({
					title: '请输入标题'
				});
				if (!this.dataform.address) return that.$util.Tips({
					title: '请输入/选择地址'
				});
				if (!this.dataform.contacts.length > 0) return that.$util.Tips({
					title: '请添加联系人'
				});
				// if (!this.dataform.image) return that.$util.Tips({
				// 	title: '请上传照片'
				// });
				this.AddAgent()
			},
			async AddAgent() {
				try {
					let res = await getAgentAddApi(this.dataform);
					this.toPage('/pages/releases/brand/brand');
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';
</style>